<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>鼠标滑过改变显示内容</title>
<style type="text/css">
@charset "utf-8";
/* 全局样式 */
html, body, div, span, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, address, big, cite, code, del, em, font, img, ins, small, strong, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, button, input, textarea, table, th, td { padding: 0; margin: 0; }
h1, h2, h3, h4, h5, h6 { font-size: 12px; font-weight: normal; }
div { margin: 0 auto; }
body { background: url(../images/bg.jpg); }
div { text-align: left; }
a img { border: 0; }
table { border-collapse: collapse; border-spacing: 0; }
select, input, textarea { font: 12px "宋体"; outline: none; }
body { color: #333; text-align: center; font: 12px "宋体"; }
ul, ol, li { list-style-type: none; vertical-align: 0; }
a { outline-style: none; color: #333; text-decoration: none; }
a, area { blr:expression(this.onFocus=this.blur())
}
:focus { -moz-outline-style: none; }
.clear { clear: both; }
.hidden { display: none; }
.block { display: block; }
.ht10px { height: 10px; font-size: 0px; line-height: 0px; }
.ht4px { height: 4px; font-size: 0px; line-height: 0px; }
.left { float: left }
.right { float: right }
.changeList { height: 239px; width: 248px; margin-top: 10px; border: 1px #dddddd solid; font-family: Arial; }
.changeList-top { background: url(images/scTitleGg.gif) no-repeat top; height: 37px; width: 248px }
.changeList dt { display: block; height: 37px; width: 236px; padding-left: 10px; text-align: left; line-height: 37px; float: left; background-color: #efefef; margin-left: 1px; margin-bottom: 1px; background: url(images/shuBg.gif) repeat-x top; }
.changeList dt p { float: left; color: #757575; }
.changeList dd { float: left; height: 49px; width: 246px; margin-bottom: 1px; display: block; background-color: #c20000; margin-left: 1px; cursor: pointer; }
.changeList h1 { display: block; float: right; height: 49px; width: 29px }
.changeList em { float: right; height: 37px; width: 29px; display: block }
.changeListText { float: left; height: 41px; width: 200px; margin-left: 5px; padding-top: 8px; text-align: left; }
.changeListText a { line-height: 18px; color: #FFF; }
</style>
<script type="text/javascript">
 function changebox(n) {
	var i = 1;
	while(true){
	  try{
		  document.getElementById("a"+i).style.display = 'none';
		  document.getElementById("b"+i).style.display = 'block';	
	  }
	  catch(e){
		  break;
	  }
	  i++;
	}
	document.getElementById("a"+n).style.display = 'block';
	document.getElementById("b"+n).style.display = 'none';
 }
</script>

</head>

<body>

<div style="background:#FFF; padding:10px;">
<!--效果开始-->
<div class="changeList">
  <div class="changeList-top"></div>
  <dl>
    <dt id="b1" style="display:none" onmouseover="changebox(1);">
      <p>网站公告...</p>
      <em><img src="images/shu1.gif"  width="29" height="37"/></em></dt>
    <dd id="a1">
      <h1><img src="images/shu1_1.gif" width="29" height="49" /></h1>
      <div class="changeListText"><a href="" target="_blank">为广大IT朋友提供实用的js网页特效代码！</a></div>
    </dd>
  </dl>
  <dl>
    <dt id="b2" onmouseover="changebox(2);">
      <p>网页特效集锦...</p>
      <em><img src="images/shu2.gif" width="29" height="37"/></em></dt>
    <dd id="a2" style="display:none;">
      <h1><img src="images/shu1_2.gif" width="29" height="49" /></h1>
      <div class="changeListText"><a href="" target="_blank">上下箭头渐变图文切换（多张）相册特效</a></div>
    </dd>
  </dl>
  <dl>
    <dt id="b3" onmouseover="changebox(3);">
      <p>新闻列表滑过网页特效...</p>
      <em><img src="images/shu3.gif"  width="29" height="37"/></em></dt>
    <dd id="a3" style="display:none;">
      <h1><img src="images/shu1_3.gif" width="29" height="49" /></h1>
      <div class="changeListText"><a href="" target="_blank">多图片左右渐变轮播展示相册</a></div>
    </dd>
  </dl>
  <dl>
    <dt id="b4" onmouseover="changebox(4);">
      <p>鼠标滑过改变标签内容...</p>
      <em><img src="images/shu4.gif"  width="29" height="37"/></em></dt>
    <dd id="a4" style="display:none;">
      <h1><img src="images/shu1_4.gif" width="29" height="49" /></h1>
      <div class="changeListText"><a href="" target="_blank">带左右箭头+按钮弹性滑动焦点图</a></div>
    </dd>
  </dl>
  <dl>
    <dt id="b5" onmouseover="changebox(5);">
      <p>网站建设、网站制作</p>
      <em><img src="images/shu5.gif"  width="29" height="37"/></em></dt>
    <dd id="a5" style="display:none;">
      <h1><img src="images/shu1_5.gif" width="29" height="49" /></h1>
      <div class="changeListText"><a href="" target="_blank">仿腾讯/新浪图片展示网页特效</a></div>
    </dd>
  </dl>
</div>
<!--End-->
</div>

</body>
</html>
